<template>
  <div>
    <el-dialog :visible.sync="show" title="单位资质审核" width="850px">
      <div class="fz-14 fw-6 color3 linh-40 titleBox">单位基础信息</div>
      <el-descriptions
        :column="2"
        border
        :labelStyle="{ width: '150px', 'white-space': 'nowrap' }"
      >
        <el-descriptions-item label="单位名称">
          {{ form.company.cname }}
        </el-descriptions-item>
        <el-descriptions-item label="审核状态">
          <dict-tag :options="dict.type.verify_status" :value="String(form.verifyStatus)" />
        </el-descriptions-item>
        <el-descriptions-item label="所属渠道">
          {{ form.company.channelName }}
        </el-descriptions-item>
        <el-descriptions-item label="所属行业">
          <dict-tag
            :options="dict.type.industry"
            :value="form.company.industry"
          />
        </el-descriptions-item>
        <el-descriptions-item label="单位法人">
          {{ form.company.legalname }}
        </el-descriptions-item>
        <el-descriptions-item label="单位跟进人">
          <SelectBusinessUser
            v-if="form.company.businessUserId"
            :defaultValue.sync="form.company.businessUserId"
            disabled
          />
        </el-descriptions-item>
        <el-descriptions-item label="单位等级">
          <dict-tag
            :options="dict.type.company_level"
            :value="form.company.levels"
          />
        </el-descriptions-item>
        <el-descriptions-item label="单位类型">
          <dict-tag
            :options="dict.type.company_type"
            :value="form.company.comtype"
          />
        </el-descriptions-item>
        <el-descriptions-item label="单位联系人">
          {{ form.company.contactName }}
        </el-descriptions-item>
        <el-descriptions-item label="联系人电话">
          {{ form.company.phone }}
        </el-descriptions-item>
        <!-- <el-descriptions-item label="单位地址">
          <span>{{ form.company.provinceName }} </span>
          <span>{{ form.company.cityName }} </span>
          <span>{{ form.company.distinctsName }} </span>
        </el-descriptions-item> -->
        <el-descriptions-item label="单位地址" :span="24">
          {{ form.company.addressall }}
        </el-descriptions-item>
        <el-descriptions-item label="单位简介" :span="24">
          {{ form.company.remarks }}
        </el-descriptions-item>
        <el-descriptions-item label="单位主图">
          <image-preview
            v-if="form.company.cimg1"
            :src="form.company.cimg1"
            :width="140"
            :height="140"
          />
        </el-descriptions-item>
        <el-descriptions-item label="单位二维码">
          <image-preview
            v-if="form.company.wxmpUrl"
            :src="form.company.wxmpUrl"
            :width="140"
            :height="140"
          />
        </el-descriptions-item>
      </el-descriptions>
      <div class="fz-14 fw-6 color3 linh-40 titleBox mt-10">管理员信息</div>
      <el-descriptions
        :column="2"
        border
        :labelStyle="{ width: '150px', 'white-space': 'nowrap' }"
      >
        <el-descriptions-item label="管理员姓名">
          {{ form.company.adminname }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          <dict-tag
            :options="dict.type.sys_user_sex"
            :value="form.company.honorific"
          />
        </el-descriptions-item>
        <el-descriptions-item label="管理员手机号">
          {{ form.company.mobile }}
        </el-descriptions-item>
        <el-descriptions-item label="管理员账号">
          {{ form.company.adminacc }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="fz-14 fw-6 color3 linh-40 titleBox mt-10">单位资质信息</div>
      <el-descriptions
        :column="2"
        border
        :labelStyle="{ width: '150px', 'white-space': 'nowrap' }"
      >
        <el-descriptions-item label="营业执照">
          <image-preview
            v-if="form.company.businessimg"
            :src="form.company.businessimg"
            :width="140"
            :height="140"
          />
        </el-descriptions-item>
        <el-descriptions-item label="医疗机构执业许可证">
          <image-preview
            v-if="form.company.miplImg"
            :src="form.company.miplImg"
            :width="140"
            :height="140"
          />
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        class="pt-20"
        :column="2"
        border
        :labelStyle="{ width: '150px', 'white-space': 'nowrap' }"
      >
        <el-descriptions-item label="创建人">
          <div style="width: 225px">{{ form.company.createBy }}</div>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">
          <div style="width: 225px">{{ form.company.createTime }}</div>
        </el-descriptions-item>
        <template v-if="form.verifyStatus">
          <el-descriptions-item label="审核人">
            {{ form.verifyUser }}
          </el-descriptions-item>
          <el-descriptions-item label="审核时间">
            {{ form.verifyTime }}
          </el-descriptions-item>
        </template>
        <el-descriptions-item label="审核备注" :span="24">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入审核备注说明"
            v-model="form.verifyRemark"
          >
          </el-input>
        </el-descriptions-item>
      </el-descriptions>

      <div slot="footer" class="dialog-footer">
        <div class="disFlxCC">
          <div>
            <el-button type="primary" @click="_ap(1)">审核通过</el-button>
            <el-button type="warning" @click="_ap(2)">驳回申请</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="settingsShow"
      title="快速配置单位业务信息"
      width="650px"
    >
      <div style="padding: 0 50px">
        <el-form ref="form" :show-message="false" label-width="150px">
          <el-form-item label="配置的单位：">
            <div>{{ form.company.cname }}</div>
          </el-form-item>
          <el-form-item label="单位配送服务商：">
            <el-select
              v-model="serviceCompanyItems"
              multiple
              filterable
              :placeholder="`请选择服务商`"
              clearable
              style="width: 100%"
              value-key="id"
            >
              <el-option
                v-for="item in serviceCompanyOptions"
                :key="item.id"
                :label="item.cname"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位审证审方机构：">
            <SelectCompany
              style="width: 100%"
              :defaultValue.sync="apPrescriptionCompanyId"
              :companyType="0"
            />
          </el-form-item>
          <el-form-item label="审核专家：">
            <SelectExpert
              :defaultValue.sync="apPrescriptionExpertId"
              :comId="apPrescriptionCompanyId"
              :prescriptionFlag="1"
              :disabled="!apPrescriptionCompanyId"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <div class="disFlxCC">
          <div>
            <el-button @click="settingsShow = false">取消</el-button>
            <el-button
              type="primary"
              :disabled="
                !serviceCompanyItems.length && !apPrescriptionCompanyId
              "
              @click="confirmSettings"
              >确认</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  companyVerifyDetail,
  companyVerifyOperate,
  companyConfiguration,
} from "@/api/company/company";
import SelectBusinessUser from "@/views/system/user/selectBusinessUser";
import { cooperateCompanyLists } from "@/api/facilitator";
import SelectCompany from "@/components/SelectCompany";
import SelectExpert from "@/views/expert/expert/selectExpert.vue";

export default {
  components: { SelectBusinessUser, SelectCompany, SelectExpert },
  dicts: ["company_level", "company_type", "industry", "sys_user_sex", "verify_status"],
  data() {
    return {
      show: false,
      form: {
        company: {},
      },
      settingsShow: false,
      serviceCompanyOptions: [], // 服务商列表
      serviceCompanyItems: [], // 选中的服务商对象列表
      apPrescriptionCompanyId: undefined,
      apPrescriptionExpertId: undefined,
    };
  },
  methods: {
    openDialog(id) {
      this.show = true;
      companyVerifyDetail(id).then((res) => {
        this.form = res.data;
        this.getCooperateCompanyLists(this.form.company.channelId);
      });
    },
    _ap(apStatus) {
      if (apStatus === 2 && !this.form.verifyRemark) {
        this.$message.error("请输入审核备注说明");
        return;
      }
      companyVerifyOperate({
        id: this.form.id,
        verifyRemark: this.form.verifyRemark,
        verifyStatus: apStatus,
      }).then(() => {
        this.$message.success("审核成功");
        this.show = false;
        this.$emit("refresh");
        if (
          apStatus === 1 &&
          !this.form.company.serviceCompanyIds &&
          !this.form.company.apPrescriptionCompanyId
        ) {
          this.settingsShow = true;
        }
      });
    },
    getCooperateCompanyLists(channelId) {
      cooperateCompanyLists({ channelId, pageSize: 999 }).then((res) => {
        this.serviceCompanyOptions = res.rows.map((v) => {
          return {
            id: v.companyId,
            cname: v.companyName,
          };
        });
      });
    },
    // 确认配置
    confirmSettings() {
      let params = { id: this.form.company.id };
      let _serviceCompanyIds = this.serviceCompanyItems.map((v) => v.id);
      if (_serviceCompanyIds.length) {
        params.serviceCompanyIds = _serviceCompanyIds.join(",");
      }
      if (this.apPrescriptionCompanyId) {
        params.apPrescriptionCompanyId = this.apPrescriptionCompanyId;
        if (this.apPrescriptionExpertId) {
          params.apPrescriptionExpertId = this.apPrescriptionExpertId;
        }
      }
      companyConfiguration(params).then(() => {
        this.$message.success("配置成功");
        this.settingsShow = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.titleBox {
  position: relative;
  padding-left: 20px;
  &::before {
    display: block;
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(50%);
    width: 4px;
    height: 20px;
    background-color: red;
  }
}
</style>
